<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-menu.el-menu--horizontal {
            border-bottom: 0;
        }
        body {
            font-size: 14px;
            font-family: 微软雅黑, "Microsoft Yahei", arial, 宋体, simsun;
            margin: 0;
            padding: 0;
            border: 0;
        }
        .top_a {
            width: 100%;
            height: 35px;
            position: relative;
            background-color: #f6f6f6;
        }
        .top_b {
            width: 100%;
            height: 80px;
            background-color: #fff;
            position: fixed;

        }
        .shouye {
            text-decoration: none;
        }
        .el-header {
            width: 100%;
            background-color: white;
            z-index: 999;
        }
        .a {
            width: 100%;
            height: 170px;
            background-color: #282c30;
            text-align: center;
        }
        div {
            display: block;
        }
        .a > div {
            overflow: hidden;
            margin-top: 23px;
        }
        .weibu {
            color: white;
            text-decoration: none;
            margin-right: 20px;
        }
        .info_web {
            color: #6b6b6b;
        }
        .dis_detail {
            width: 400px;
            height: 150px;
            position: relative;
            top: -150px;
        }
        .q {
            color: white;
        }
        .count_a{
            width: 400px;height: 380px;float: left;
            margin-left: 10px;
        }
        #count_img{
            /*设置动画的持续时间 1s=1秒*/
            transition-duration: 1s;
        }
        #count_img:hover{
            /*设置图片悬停后缩放1.1倍*/
            transform: scale(1.2);
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header >
            <div class="top_b" style="height: 60px">
                <el-menu mode="horizontal" background-color="white">
                    <el-menu-item index="1"><img src="imgs/易装网.png"
                                                 style="width: 100%;height: 100%"></el-menu-item>
                    <el-menu-item index="2"><a class="shouye" href="">首页</a></el-menu-item>
                    <el-submenu index="3">
                        <template slot="title">学装修</template>
                        <el-submenu index="3-1">
                            <template slot="title">按空间</template>
                            <el-menu-item index="3-1-1">客厅</el-menu-item>
                            <el-menu-item index="3-1-2">卧室</el-menu-item>
                            <el-menu-item index="3-1-3">餐厅</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3-2">
                            <template slot="title">按风格</template>
                            <el-menu-item index="3-2-1">简约</el-menu-item>
                            <el-menu-item index="3-2-2">现代</el-menu-item>
                            <el-menu-item index="3-2-3">中式</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3-3">
                            <template slot="title">按户型</template>
                            <el-menu-item index="3-3-1">小户型</el-menu-item>
                            <el-menu-item index="3-3-2">一居室</el-menu-item>
                            <el-menu-item index="3-3-3">二居室</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="4"><a class="shouye" href="">装修材料</a></el-menu-item>
                    <el-menu-item index="5"><a class="shouye" href="">学装修</a></el-menu-item>
                    <el-menu-item index="6"><a class="shouye" href="shop.html">材料商城</a></el-menu-item>
                    </el-menu-item>
                    <el-menu-item><a class="shouye" href="">设计师信息</a></el-menu-item>
                    <div class="rag">
                        <a style="float: right;position: relative;font-size: 13px;color: #999;
                        margin-top: 23px;margin-right: 30px" href="">登录/注册</a>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto;padding: 10px" >
            <!--分类导航菜单开始-->

            <!--分类导航菜单结束-->
            <!--计价器页面开始-->
                    <div id="count" style="z-index:0;font-weight:bold ;font-size:17px">
                        <img src="imgs/countpagePic/backgoundPic.jpg" width="1200px">
                        <div style="z-index: 1;position: relative;right: -200px;bottom:670px;">
                            <img src="imgs/countpagePic/count1.png">
                        </div>
                        <div>
                            <el-card style="width: 980px;height: 420px;background-color: rgba(255,255,255,0.95);margin: 0 auto;
                                            z-index: 1;position: relative;right: 0px;bottom:650px ">
                                <!--左侧信息栏开始-->
                             <div class="count_a">
                                <div style="float: left;position:relative;top:-10px">
                                    <h3>装修计价器</h3>
                                </div>
                                 <div style="position: relative;left: 10px">
                                     <p>已有<b style="color: red">1919810</b>位业主获取了装修报价！ </p>
                                 </div>
                                <div style="position: relative;top:-20px">
                                    <div style="position: relative ;top:107px ;left:185px;z-index: 5">
                                        <img src="imgs/countpagePic/img.png" alt="">
                                    </div>
                                    <el-form label-width="80px":inline="true"  size="mini">
                                        <el-form-item label="选择住址" :inline="true" >
                                            <el-col style="margin-left:10px;width: 120px" >
                                                <el-select v-model="values.provinceID"  @change="selectCity()" >
                                                    <el-option v-for="item in Province" :key="item.id" :label="item.province" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col style="margin-left:10px;width: 120px" v-if="isShowCity">
                                                <el-select v-model="values.cityID"  @change="selectDistrict()">
                                                    <el-option v-for="item in City" :key="item.id" :label="item.city" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col style="margin-left:10px;width: 120px" v-if="isShowDistrict">
                                                <el-select v-model="input.districtID"  >
                                                    <el-option v-for="item in District" :key="item.id" :label="item.district" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                        </el-form-item>

                                    <el-form-item label="房屋面积">
                                            <el-input v-model="input.area" placeholder="请输入房屋面积：" style="width: 132%">

                                            </el-input>
                                    </el-form-item>
                                        <el-form-item label="房屋户型" >
                                            <el-select v-model="input.houseTypeId" placeholder="请选择房屋户型：" style="width: 122%">
                                                <el-option  v-for="item in HouseType" :key="item.houseTypeId" :label="item.houseType" :value="item.houseTypeId">

                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="联系电话">
                                            <el-input v-model="input.phone" placeholder="请输入手机号：" style="width: 132%">

                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="联系邮箱">
                                            <el-input v-model="input.email" placeholder="请输入邮箱地址：" style="width: 132%">

                                            </el-input>
                                        </el-form-item>
                                </el-form>
                                    <div style="font-size: 14px">您的个人信息将严格保密，请放心填写。</div>
                                </div>
                             </div>
                                <!--左侧信息栏结束-->
                                <!--中间栏开始-->
                             <div style="float: left;width: 100px;height: 350px">
                                 <img id="count_img" src="imgs/countpagePic/count2.jpg" alt="" style="height: 70px;width: 70px;margin: 150px 0 0 20px" @click="count()">
                                    <h3 style="position: relative;left: 17px;top:-14px" @click="count()">开始计算</h3>
                             </div>
                                <!--中间结束-->
                                <!--右侧信息栏开始-->
                             <div style="width: 400px;height: 380px;float: left;
                                margin-left: 10px;text-align: center">
                                 <div style="position: relative;top:20px;right: -90px;overflow:visible">
                                     <el-table
                                             :data="tableData"
                                             border
                                             style="width: 80.4%;alignment: right">
                                         <el-table-column
                                                 prop="houseRequirement"
                                                 label="方案"
                                                 width="80">
                                         </el-table-column>
                                         <el-table-column
                                                 prop="priceBySelf"
                                                 label="自装"
                                                 width="80">
                                         </el-table-column>
                                         <el-table-column
                                                 prop="priceByHalfOuter"
                                                 label="半包"
                                                 width="80">
                                         </el-table-column>
                                         <el-table-column
                                                 prop="priceByFullOuter"
                                                 label="全包"
                                                 width="80">
                                         </el-table-column>
                                     </el-table>
                                 </div>
                             </div>
                                <!--右侧信息栏结束-->
                            </el-card>
                        </div>

                    </div>
            <!--计价器页面结束-->
        </el-main>
        <el-footer>
            <div class="a">
                <div>
                    <a class="weibu" href="" target="_blank"><span>关于我们</span></a>
                    <a class="weibu" href="" target="_blank"><span>帮助中心</span></a>
                    <a class="weibu" href="" target="_blank"><span>联系我们</span></a>
                    <a class="weibu" href="" target="_blank"><span>VIP服务</span></a>
                </div>
                <div class="info_web">
                    <p>Copyright © 2009-2023 zhuangyi.com All Rights Reserved</p>
                    <p>免责声明：本网站部分内容由用户自行上传，如权利人发现存在误传其作品情形，请及时与本站联系</p>
                    <p>河南车前草计算机科技有限公司 版权所有</p>
                </div>
                <div class="dis_detail">
                    <el-row gutter="10">
                        <el-col span="8">
                            <img width="100" height="100" src="https://static.zhuangyi.com/css/index/img/ewm_m.png">
                            <p class="q">手机版</p></el-col>
                        <el-col span="8">
                            <img width="100" height="100" src="https://static.zhuangyi.com/css/index/img/ewm_xcx.jpg">
                            <p class="q">小程序</p></el-col>
                        <el-col span="8">
                            <img width="100" height="100" src="https://static.zhuangyi.com/css/index/img/ewm_wx.png">
                            <p class="q">公众号</p></el-col>
                    </el-row>


                </div>
            </div>


        </el-footer>
    </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                isShowCity:true,
                isShowDistrict:true,
                values:{provinceID:"",cityID:""},
                Province:[],
                City:[],
                District: [],
                HouseType:[],
                input: {area:"",phone:"",email:"",districtID:"",houseTypeId:""},
                tableData: []
            }
        },
        methods:{
            selectCity(){
                /*触发事件 查找所有市级单位名称*/
                      let provinceId=this.values.provinceID
                axios.get("/location/selectCity?provinceId="+provinceId).then(function (response) {
                    v.City=response.data;
                    v.isShowCity=true;
                    v.isShowDistrict=true;
                    if (v.City==0){
                        let cityId=provinceId+100;
                        axios.get("/location/selectDistrict?cityId="+cityId).then(function (response) {
                            v.District=response.data;
                            v.isShowCity=false;
                            if (v.District==0){
                                v.isShowDistrict=false;
                            }
                        })
                    }
                })


            },
            selectDistrict(){
                /*触发事件 查找所有区级单位名称*/
                let cityId=this.values.cityID
                axios.get("/location/selectDistrict?cityId="+cityId).then(function (response) {
                    v.District=response.data;
                })
            },
            count(){
                /*触发事件 跳转到注册页面 并把用户数据保存到后台*/
                /*触发事件 计算价格 并把用户数据保存到后台*/
                axios.post("/house/insertInfo",v.input).then((response)=>{

                })
            }


        },
        created:function () {
            /*进入页面 获取所有省级单位名称*/
            axios.get("/location/selectProvince").then(function (response) {
                v.Province=response.data;
            })
            /*进入页面 获取所有房屋类型名称*/
            axios.get("/house/selectHouseType").then((response)=>{
                v.HouseType=response.data;
            })
            /*进入页面 获取所有装修需求名称*/
            axios.get("/house/selectHouseRequirement").then((response)=>{
                v.tableData=response.data;
            })

        }

    })
</script>
</html>

<!--
    if (v.City.keys(v.City).length==0){
                        let cityId=provinceId+100;
                        axios.get("/location/selectDistrict?cityId="+cityId).then(function (response) {
                            v.District=response.data;
                            v.isShow=false
                        })
                    }
-->